<template>
  <div class="polygon">
    <div class="polygon-top">
      <span>绘制面</span>
      <el-popover
          class="polygon-help"
          placement="top-end"
          title="帮助说明"
          width="250"
          trigger="click"
          content="点击'选择区域'后，鼠标左键在模型中多次点击绘制面，鼠标右键完成绘制">
        <el-button slot="reference"><i class="ri-question-line"></i></el-button>
      </el-popover>
    </div>
    <div class="polygon-divider">
      <el-divider>
        <i class="ri-pencil-line"></i>
      </el-divider>
    </div>
    <div class="polygon-data">
      <el-form ref="polygonData" :model="polygonObj" label-width="140px">
        <el-form-item label="面ID">
          <el-select v-model="polygonIndex" placeholder="请选择" @change="changePolygon">
            <el-option
                v-for="(item,index) in polygonLists"
                :key="item.id"
                :label="'画面'+(index+1)"
                :value=index>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="面颜色" class="color">
          <el-color-picker color-format="rgb" v-model="polygonObj.color"></el-color-picker>
        </el-form-item>
        <el-form-item label="可视范围">
          <el-input-number v-model="polygonObj.range[0]" :step="1" :max="2000" :min="1"></el-input-number>
          <el-input-number v-model="polygonObj.range[1]" :step="1" :max="1000000" :min="3000"></el-input-number>
        </el-form-item>
        <el-form-item label="边框颜色" class="color">
          <el-color-picker color-format="rgb" v-model="polygonObj.frameColor "></el-color-picker>
        </el-form-item>
        <el-form-item label="边框厚度">
          <el-input-number v-model="polygonObj.frameThickness" :step="0.1" :min="0" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item label="是否做深度检测">
          <el-switch v-model="polygonObj.depthTest"></el-switch>
        </el-form-item>
        <el-form-item label="亮度">
          <el-input-number :disabled="polygonObj.style!==0" v-model="polygonObj.intensity" :step="1" :min="0"
                           :max="1000"></el-input-number>
        </el-form-item>
        <el-form-item label="面样式">
          <el-select v-model="polygonObj.style" placeholder="请选择">
            <el-option
                v-for="item in polygonStyle"
                :key="item.value"
                :label="item.labelLeft"
                :value="item.value"
            >
              <span style="float: left">{{ item.labelLeft }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.labelRight }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="polygon-btn">
      <el-button @click="selectPolygon()">选择区域</el-button>
      <el-button @click="delPolygon()">删除</el-button>
      <el-button @click="closePolygon()">关闭</el-button>
      <el-button @click="upPolygon()">更新</el-button>
    </div>
  </div>
</template>
<style lang="scss">
@import '@/css/polygon/polygonPopup';
</style>
<script>
/* eslint-disable */
import 'remixicon/fonts/remixicon.css'

export default {
  name: 'polygonPopup',
  props: {
    polygonLists: {
      type: Array,
    },
    polygonIds: {
      type: Array,
    },
  },
  data() {
    return {
      polygonIndex: null,
      polygonObj: {
        id: null,//折线唯一标识id
        color: 'rgb(220,20,60)',
        coordinates: [],
        range: [1, 1000000],
        frameColor: 'rgb(220,20,60)',//边框颜色
        frameThickness: 1,//边框厚度
        depthTest: false,//是否做深度检测
        intensity: 1,//亮度
        style: 0,//多边形样式
      },
      polygonStyle: [
        {
          value: 0,
          labelLeft: '单色',
          labelRight: 'SingleColor',
        },
        {
          value: 1,
          labelLeft: '圆点',
          labelRight: 'CirclePoint',
        },
        {
          value: 2,
          labelLeft: '体积',
          labelRight: 'Volumn',
        },
        {
          value: 3,
          labelLeft: '渐变',
          labelRight: 'Gradual',
        },
        {
          value: 4,
          labelLeft: '动态渐变',
          labelRight: 'DynamicGradual',
        },
        {
          value: 5,
          labelLeft: '波纹',
          labelRight: 'WaveTransparent',
        },
        {
          value: 6,
          labelLeft: '宽波纹',
          labelRight: 'WideWave',
        },
        {
          value: 7,
          labelLeft: '旋转箭头',
          labelRight: 'RotateArrow',
        },
        {
          value: 8,
          labelLeft: '旋转线',
          labelRight: 'Rotategon',
        },
        {
          value: 9,
          labelLeft: '旋转渐变',
          labelRight: 'RotateGradual',
        },
      ],
    }
  },
  methods: {
    extractRGBComponents(colorString) {
      let rgbRegExp = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/;
      let match = colorString.match(rgbRegExp);
      if (match) {
        return [parseInt(match[1]) / 255, parseInt(match[2]) / 255, parseInt(match[3]) / 255];
      } else {
        return null;
      }
    },
    selectPolygon() {
      __g.editHelper.setParam(0, 1)
      __g.editHelper.start();
    },
    async addPolygon(coordinates) {
      const timestamp = new Date().getTime();
      let id = 'polygon' + timestamp
      let color = this.extractRGBComponents(this.polygonObj.color)
      let frameColor = this.extractRGBComponents(this.polygonObj.frameColor)
      let obj = {
        id: id,
        color: color,
        coordinates: coordinates,
        range: this.polygonObj.range,
        frameColor: frameColor,
        frameThickness: this.polygonObj.frameThickness,
        depthTest: this.polygonObj.depthTest,
        intensity: this.polygonObj.intensity,
        style: this.polygonObj.style,
      }
      this.polygonLists.push(obj)
      this.polygonIndex = this.polygonLists.length - 1
      this.polygonIds.push(id)
      await __g.polygon.add(obj);
      this.polygonObj.id = id
    },
    delPolygon() {
      if (this.polygonObj.id) {
        __g.polygon.delete(this.polygonObj.id);
        this.polygonLists.splice(this.polygonIndex, 1)
        this.polygonIds.splice(this.polygonIndex, 1)
        if (this.polygonLists.length !== 0) {
          this.polygonIndex = this.polygonLists.length - 1
          this.changePolygon()
        } else {
          this.reloadPolygon()
        }
      } else {
        this.$message.warning("未选择删除的对象")
      }
    },
    closePolygon() {
      this.$emit('close-popup');
      this.reloadPolygon()
    },
    reloadPolygon() {
      this.polygonIndex = null
      this.polygonObj = {
        id: null,//折线唯一标识id
        color: 'rgb(220,20,60)',
        coordinates: [],
        range: [1, 1000000],
        frameColor: 'rgb(220,20,60)',//边框颜色
        frameThickness: 5,//边框厚度
        depthTest: false,//是否做深度检测
        intensity: 0.1,//亮度
        style: 6,//多边形样式
      }
    },
    upPolygon() {
      this.$message.success("开发中")
    },

    changePolygon() {
      let color = this.convertRGBArrayToRGB(this.polygonLists[this.polygonIndex].color)
      let frameColor = this.convertRGBArrayToRGB(this.polygonLists[this.polygonIndex].frameColor)
      this.polygonObj = {
        id: this.polygonLists[this.polygonIndex].id,
        color: color,
        coordinates: this.polygonLists[this.polygonIndex].coordinates,
        range: this.polygonLists[this.polygonIndex].range,
        frameColor: frameColor,
        frameThickness: this.polygonLists[this.polygonIndex].frameThickness,
        depthTest: this.polygonLists[this.polygonIndex].depthTest,
        intensity: this.polygonLists[this.polygonIndex].intensity,
        style: this.polygonLists[this.polygonIndex].style,
      }
    },
    convertRGBArrayToRGB(rgbArray) {
      let r = Math.round(rgbArray[0] * 255);
      let g = Math.round(rgbArray[1] * 255);
      let b = Math.round(rgbArray[2] * 255);
      return `rgb(${r}, ${g}, ${b})`;
    },
  },
  mounted() {

  }
}
</script>